<template>
  <el-dropdown :size="size" placement="bottom-end">
    <span class="flex-start-center">
      <span v-if="title" class="text-color-text">{{ `${title}：` }}</span>
      <span class="pointer">{{ `${proxy.$com.optionsName(options, data[dataName], valueName, labelName)}` }}</span>
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in options" :key="item[valueName]" @click="changeBtn(item[valueName])">{{
          item[labelName] }}</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup lang="ts">
import { getCurrentInstance, reactive, onMounted, ref } from 'vue';
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    data: any;
    dataName?: any;
    options?: any; //
    size?: string; //
    labelName?: string; //
    valueName?: string; //
    title?: string; //标题
  }>(),
  {
    type: '',
    size: 'default',
    clearable: true,
    filterable: true,
    placeholder: '请选择',
    labelName: 'label',
    valueName: 'value',
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn', val: any, row: any): void;
}>();
const r_data = reactive({
  loading: false,
  options: [],
});

const changeBtn = (val: any) => {
  props.data[props.dataName] = val;
  emit('changeBtn', val, props.data);
};
onMounted(() => { });
</script>
<style scoped></style>
